<template>
	<view class="main uni-pa-4">
		<div class="header">
			<div class="paper-title flex justify-center font-bold">
				{{ paper.name }}
			</div>
			<div class="desc flex items-center justify-end uni-mt-2">
				<div class="flex justify-between text">
					<div class="flex items-center">（满分:{{ paper.fullScore }}分<span class="uni-ml-4">时间:{{ paper.useTime }}分钟</span>）</div>
					<div class="difficulty flex items-center">
						<span class="mr-1">试卷难度: </span>
						<div class="flex items-center">
							<uni-icons v-for="i in difficultyArr" :key="i" class="icon" type="star-filled" size="12"></uni-icons>
						</div>
					</div>
				</div>
			</div>
		</div>
        <div class="uni-mt-8">
            <topicType
            v-for="(item, i) in paper.questionsTypeVos"
            :key="item.id"
            :type-topic="item"
            :i="i"
            :textByTopicType="textByTopicType"
			class="uni-mt-4"
			@setCollect="onSetCollect"
            />
        </div>
	</view>
</template>

<script lang="ts" setup>
import topicType from '../../components/topicType.vue';
import { onLoad } from "@dcloudio/uni-app";
import { computed, onMounted, reactive } from 'vue';
import request from '../../utils/request';
import { QuestionItem } from '../../utils/type';

interface Paper {
    id: number;
    name: string;
    fullScore: number;
    useTime: number;
    difficulty: number;
    questionsTypeVos: QuestionsTypeVos[]; 
}

interface QuestionsTypeVos {
    id: number;
    type: number;
    everyoneScore: number;
    fullScore: number;
    difficulty: number;
    questionsList: QuestionItem[];
    name?: string;
}

const global = reactive({
	option: {
		id: ''
	},
	paper: <Paper>{
        id: 0,
        name: '',
        fullScore: 0,
        useTime: 0,
        difficulty: 0,
        questionsTypeVos: []
    },
});

const textByTopicType = {
    1: '填空题',
    2: '选择题',
    3: '计算题',
    4: '应用题',
    5: '判断题'
};

const getPaper = async () => {
    const paper = await request({
        method: 'POST',
        url: '/app/member-paper/getOneById',
        contentTypeIsForm: true,
        data: {
            id: global.option.id
        },
        showLoading: {}
    });
    global.paper = paper;
};

const paper = computed(() => global.paper);

const difficultyArr = computed(() => {
    const arr: any[] = [];
    arr.length = paper.value.difficulty;
    return arr;
});

const onSetCollect = (isCollect: 0 | 1, topic: QuestionItem) => {
	topic.isCollect = isCollect;
};

onLoad((option) => {
	// console.log(option);
	global.option.id = option.id;
});

onMounted(() => {
	getPaper();
});
</script>

<style lang="scss" scoped>
@import 'paperView.scss';
</style>
